import React from "react";
import PropTypes from 'prop-types';
import './index.scss'

export default class Popover extends React.Component {

    static propTypes = {
        style: PropTypes.object,
        className: PropTypes.string,
        readerLabel: PropTypes.func,
        renderPopoverBox: PropTypes.func
    }

    static defaultProps = {
        style: {},
        className: '',
        readerLabel: () => (<></>),
        renderPopoverBox: () => (<></>)
    }

    state = {flag: false}

    labelRef = React.createRef()
    popoverRef = React.createRef()

    componentDidMount() {
        const {labelRef, popoverRef} = this
        labelRef.current.addEventListener('mouseenter', () => {
            popoverRef.current.style.transform = 'scale(1)'
            this.setState({ flag: true })
        })
        labelRef.current.addEventListener('mouseleave', () => {
            setTimeout(() => {
                if (this.state.flag) {
                    popoverRef.current.style.transform = 'scale(0)'
                }
            }, 200)
        })
        popoverRef.current.addEventListener('mouseenter', () => {
            this.setState({ flag: false })
            popoverRef.current.style.transform = 'scale(1)'
        })
        popoverRef.current.addEventListener('mouseleave', () => {
            popoverRef.current.style.transform = 'scale(0)'
        })
    }

    render() {
        return (
            <div style={ this.props.style }
                 className={ 'popover-warp ' + this.props.className }
            >
                <div ref={ this.labelRef } className='label'>
                    { this.props.readerLabel() }
                </div>
                <div ref={ this.popoverRef } className='popover-box' >
                    { this.props.renderPopoverBox() }
                </div>
            </div>
        )
    }
}

/*
export default function Popover() {

    const [flag, setFlag] = useState(false)

    const btnRef = useRef()
    const dropdownRef = useRef()

    useEffect(() => {
        btnRef.current.addEventListener('mouseenter', () => {
            dropdownRef.current.style.transform = 'scale(1)'
            setFlag(true)
        })
        btnRef.current.addEventListener('mouseleave', () => {
            setTimeout(() => {
                if (flag) {
                    dropdownRef.current.style.transform = 'scale(0)'
                    setFlag(false)
                }
            }, 1000)
        })
        dropdownRef.current.addEventListener('mouseenter', () => {
            setFlag(() => {
                console.log('regwegwrtef')
                return false
            })
            dropdownRef.current.style.transform = 'scale(1)'
        })
        dropdownRef.current.addEventListener('mouseleave', () => {
            dropdownRef.current.style.transform = 'scale(0)'
        })
    })

    return (
        <div className='dropdown-warp'>
            <button ref={ btnRef } className='btn'>
                <i className='icon-upload' />
                <span>上传</span>
            </button>
            <div ref={ dropdownRef } className='dropdown-box' >
                <div className='item'>
                    <img src={ fileSVG } alt={ 'file' }/>
                    <span>上传文件</span>
                </div>
                <div className='item' >
                    <img src={ dirSVG } alt={ 'dir' } />
                    <span>上传文件夹</span>
                </div>
            </div>
        </div>
    )
}*/
